<template>
  <div>
    <div style="margin-bottom: 5px;">
      <el-select v-model="typeId" filterable placeholder="全部" style="margin-left: 5px;">
        <el-option
            v-for="item in typeIds"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 5px;" @click="loadPost">分类查看</el-button>
      <el-button type="success" @click="resetParam">查看全部</el-button>
      <el-button type="info" @click="add">发布资源</el-button>

    </div>
    <el-table :data="tableData"
              :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"

    >

      <el-table-column prop="id" v-if="false">
      </el-table-column>
      <el-table-column prop="shareStatus" label="" width="65">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.shareStatus === 0 ? 'info' : 'success'"
              disable-transitions>{{scope.row.shareStatus === 0 ? '锁定' : '正常'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="typeId" label="" width="90">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.typeId === 1 ? 'success' : (scope.row.typeId === 2 ? 'primary':'danger')"
              disable-transitions>{{scope.row.typeId === 1 ? '工具资源' : (scope.row.typeId === 2 ? '学习资源'  : '游戏资源')}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="300" :formatter="titleFormat">
      </el-table-column>
      <el-table-column prop="userName" label="发布者" width="150">
      </el-table-column>
      <el-table-column prop="link" label="链接" v-if="false">
      </el-table-column>
      <el-table-column prop="mainText" label="介绍" width="450" :formatter="mainTextFormat">
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="150">
      </el-table-column>
      <el-table-column prop="operate" label="">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="read(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20,30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <el-dialog
        title="资源内容"
        :visible.sync="centerDialogVisible"
        width="70%"
        center>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="form.title" :readonly = "true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="发布者" prop="userName">
          <el-col :span="20">
            <el-input v-model="form.userName" :readonly = "true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="发布时间" prop="createTime">
          <el-col :span="20">
            <el-input v-model="form.createTime" :readonly = "true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="资源链接" prop="link">
          <el-col :span="20">
            <el-input v-model="form.link" :readonly = "true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="资源介绍" prop="mainText">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="form.mainText" :readonly = "true"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">返  回</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="发布资源"
        :visible.sync="centerDialogVisible2"
        width="80%"
        center>

      <el-form ref="addForm" :model="addForm" label-width="80px">
        <el-form-item label="资源类别" prop="type">
            <el-select v-model="addForm.typeId" placeholder="请选择">
              <el-option label="工具资源" value="1"></el-option>
              <el-option label="学习资源" value="2"></el-option>
              <el-option label="游戏资源" value="3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-col :span="20">
            <el-input type="textarea" autosize
                      v-model="addForm.title" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="链接" prop="link">
          <el-col :span="20">
            <el-input v-model="addForm.link" >
              <template slot="prepend">Http://</template>
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="资源介绍" prop="mainText">
          <el-col :span="20">
            <el-input type="textarea" :autosize="{minRows:10}"
                      v-model="addForm.mainText" ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">返  回</el-button>
        <el-button @click="doSave">发  布</el-button>
  </span>
    </el-dialog>

  </div>


</template>

<script>
export default {
  name: "Resource",
  data() {
    return {
      user:{},
      tableData: [],
      pageSize:10,
      pageNum:1,
      total:0,
      times:'',
      centerDialogVisible:false,
      centerDialogVisible2:false,
      form:{
        id:'',
        title:'',
        userName:'',
        link:'',
        mainText:'',
        typeId:'',
        createTime:''
      },
      addForm:{
        id:'',
        creatorId:'',
        typeId:'1',
        title:'',
        link:'',
        mainText:'',
        createTime:'',
        shareStatus: '1'
      },
      typeId:'',
      typeIds:[
        {
          value: '3',
          label: '游戏资源'
        },
        {
          value: '2',
          label: '学习资源'
        }, {
          value: '1',
          label: '工具资源'
        }
      ],
      rules: {

      }
    }
  },
  methods:{
    init(){
      this.user = JSON.parse(sessionStorage.getItem('CurUser'))
    },
    resetForm() {
      this.$refs.addForm.resetFields();
    },
    mainTextFormat(row, column, cellValue) {
      if (!cellValue) return "";
      if (cellValue.length > 30) {
        //最长固定显示4个字符
        return cellValue.slice(0, 30) + "......";
      }
      return cellValue;
    },
    titleFormat(row, column, cellValue) {
      if (!cellValue) return "";
      if (cellValue.length > 20) {
        //最长固定显示4个字符
        return cellValue.slice(0, 20) + "......";
      }
      return cellValue;
    },
    read(row){
      if(row.shareStatus == 0){
        this.$message({
          message: '该资源已被锁定 禁止查看！',
          type: 'error'
        });
      }else{
        console.log(row)
        this.centerDialogVisible = true
        this.$nextTick(()=>{
          //赋值到表单
          this.form.id = row.id
          this.form.title = row.title
          this.form.link = row.link
          this.form.userName = row.userName
          this.form.mainText = row.mainText
          this.form.createTime = row.createTime
        })
      }
    },
    add(){
      this.centerDialogVisible2 = true
      this.$nextTick(()=>{
        this.resetForm()
      })

    },
    doSave(){
      this.addForm.createTime = this.times
      this.addForm.creatorId = this.user.id
      this.$axios.post(this.$httpUrl+'/sns-resource/save',this.addForm).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==200){

          this.$message({
            message: '发布成功！',
            type: 'success'
          });
          this.centerDialogVisible2 = false
          this.loadPost()
          this.resetForm()
        }else{
          this.$message({
            message: '发布失败！',
            type: 'error'
          });
        }

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum=1
      this.pageSize=val
      this.loadPost()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum=val
      this.loadPost()
    },
    resetParam(){
      this.typeId = ''
      this.loadPost()
    },
    loadPost(){
      this.$axios.post(this.$httpUrl+'/sns-resource/listPage',{
        pageSize:this.pageSize,
        pageNum:this.pageNum,
        param:{
          typeId:this.typeId+'',
        }
      }).then(res=>res.data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.tableData=res.data
          this.total=res.total
        }else{
          alert('获取数据失败')
        }

      })
    },

    getTimes(){
      setInterval(this.getTimesInterval, 1000);
    },
    getTimesInterval:function() {
      const newtime = new Date();
      let year = this.getIncrease(newtime.getFullYear(),4); //获取当前时间的年份
      let month = this.getIncrease(newtime.getMonth() + 1,2); //获取当前时间的月份
      let day = this.getIncrease(newtime.getDate(),2); //获取当前时间的天数
      let hours = this.getIncrease(newtime.getHours(),2); //获取当前时间的小时
      let minutes = this.getIncrease(newtime.getMinutes(),2); //获取当前时间的分数
      let seconds = this.getIncrease(newtime.getSeconds(),2); //获取当前时间的秒数
      //拼接格式化当前时间
      this.times = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    getIncrease(num, digit) {
      var increase = "";
      for (var i = 0; i < digit; i++) {
        increase += "0";
      }
      return (increase + num).slice(-digit);
    }
  },
  beforeMount() {
    this.loadPost()
    this.getTimes()
    this.init()
  }
}
</script>

<style scoped>

</style>